<!-- /**
    * @Author: szm
    * @Date: 2023-11-08
    * @Description: 新增，修改
    */ -->

<template>
    <div>
        <div class="topLink">
            <p class="linkName" @click="toList">流程配置</p>
            <el-divider direction="vertical" class="mar-l-20 mar-r-20"></el-divider>
            <div class="flex">
                <p class="linkItem">
                    新增流程
                </p>
            </div>
        </div>
        <el-row justify="space-between">
            <el-col :span="8" class="pad-15 bg-fff ">
                <div class="col-title">
                    <i></i>
                    <label>基础信息</label>
                </div>
                <el-form ref="flowRef" :model="flowForm" :rules="rules" label-width="80px" class="col-form">
                    <el-form-item label="流程名称" prop="flowName">
                        <el-input v-model="flowForm.flowName" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="关联患者" prop="linkPatient">
                        <el-radio-group v-model="flowForm.linkPatient">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="15" class="pad-15 bg-fff">
                <div class="col-title">
                    <i></i>
                    <label>流程设置</label>
                </div>
                <div class="col-flow">
                    <el-timeline>
                        <el-timeline-item v-for="(activity, index) in timelineArr" :key="index" color="#409eff">
                            <slot>
                                <p>{{ activity.nodeName }}</p>
                                <div class="flow-time-div">
                                    <div>
                                        <span>使用时间下限 <span class="flow-time-m">{{ activity.lowerLimit }}分钟</span></span>
                                        <span class="flow-time-span">使用时间上限 <span class="flow-time-m">{{ activity.upperLimit
                                        }}分钟</span></span>
                                    </div>
                                    <el-icon :size="16">
                                        <Delete style="color: #409eff;cursor: pointer;" @click="deleteNode(index)" />
                                    </el-icon>
                                </div>
                            </slot>
                        </el-timeline-item>
                        <el-timeline-item color="#409eff">
                            <slot>
                                <div style="display: flex;align-items: center;">
                                    <el-icon :size="20">
                                        <CirclePlus style="color: #409eff;" />
                                    </el-icon>
                                    <el-button link type="primary" @click="openAddNode">添加节点</el-button>
                                </div>

                            </slot>
                        </el-timeline-item>
                    </el-timeline>
                    <div class="image-div" v-if="timelineArr.length==0">
                        <el-image style="width: 100px; height: 100px" :src='imgUrl' />
                        <div class="image-text">暂无配置流程</div>
                    </div>
                </div>
            </el-col>

        </el-row>
        <div class="foot-div">
            <el-button plain type="primary" @click="toList" size="large">返回</el-button>
            <el-button type="primary" @click="confirm" size="large">完成</el-button>
        </div>
        <el-drawer v-model="isShowDrawer" append-to-body >
            <template #header>
                <h4>新增流程节点</h4>
            </template>
            <template #default>
                <el-form ref="drawerRef" :model="drawerForm" :rules="drawerRules" label-width="110px">
                    <el-form-item label="节点选择" prop="nodeId">
                        <el-select v-model="drawerForm.nodeId" placeholder="请选择" size="large">
                            <el-option v-for="item in nodeOptions" :key="item.id" :label="item.nodeName" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="使用时间下限" prop="lowerLimit">
                        <div class="limit-div">
                            <el-input-number :min="1" controls-position="right" v-model="drawerForm.lowerLimit"
                                class="limit-input" size="large" />分钟
                        </div>
                    </el-form-item>
                    <i class="limit-i"></i>
                    <el-form-item label="使用时间上限" prop="upperLimit">
                        <div class="limit-div">
                            <el-input-number :min="1" controls-position="right" v-model="drawerForm.upperLimit"
                                class="limit-input" size="large" />分钟
                        </div>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button plain type="primary" @click="isShowDrawer = false">返回</el-button>
                    <el-button type="primary" @click="addNode">完成</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
  ​
<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getNodeList, createFlowConfig, editFlowConfig, getFlowInfo } from "@/api/flowConfig"
import { ElMessage } from 'element-plus'
import imgUrl from '@/assets/images/flow_none.png'
const router = useRouter();
const route = useRoute();
const typeName = ref('');
const flowId = ref('');
const nodeOptions = ref([])
const flowForm = reactive({
    flowName: '',
    linkPatient: 0
})

const rules = reactive({
    flowName: [
        { required: true, message: '请输入流程名称', trigger: 'blur' },
    ],
    linkPatient: [
        { required: true, message: '请选择是否关联患者', trigger: 'change', },
    ],
})
const drawerRef = ref()
const drawerForm = reactive({
    nodeId: null,
    nodeName: '',
    lowerLimit: null,
    upperLimit: null
})
const drawerRules = reactive({
    nodeId: [
        { required: true, message: '请选择节点', trigger: 'change', },
    ],
    lowerLimit: [

        { required: true, message: '请输入使用时间下限', trigger: 'blur' },
    ],
    upperLimit: [

        { required: true, message: '请输入使用时间上限', trigger: 'blur' },
    ],
})
const flowRef = ref()
//节点组
const timelineArr = ref([])
const isShowDrawer = ref(false)

//打开新增节点
const openAddNode = () => {
    getNodeOption()
    drawerForm.nodeId = null;
    drawerForm.lowerLimit = null;
    drawerForm.upperLimit = null;
    isShowDrawer.value = true;
}
//获取节点列表
const getNodeOption = async () => {
    await getNodeList().then((res) => {
        nodeOptions.value = res.data
    })
}
//添加节点
const addNode = () => {
    drawerRef.value.validate((valid) => {
        if (valid) {
            for (let i in nodeOptions.value) {
                if (nodeOptions.value[i].id == drawerForm.nodeId) {
                    drawerForm.nodeName = nodeOptions.value[i].nodeName
                }
            }
            timelineArr.value.push({
                nodeId: drawerForm.nodeId,
                nodeName: drawerForm.nodeName,
                lowerLimit: drawerForm.lowerLimit,
                upperLimit: drawerForm.upperLimit
            });
            isShowDrawer.value = false;
        }
    })

}
//删除节点
const deleteNode = (index) => {
    timelineArr.value.splice(index, 1)
}
// 完成
const confirm = async () => {
    flowRef.value.validate(async (valid) => {
        if (valid) {
            let obj = {
                ...flowForm,
                nodes: timelineArr.value,
            }
            if (typeName.value == '新增') {
                await createFlowConfig(obj).then((res) => {
                    if (res.code == 0) {
                        ElMessage({
                            message: typeName.value + '成功',
                            type: 'success',
                        })
                        toList();
                    } else {
                        ElMessage.error(res.message)
                    }
                })
            } else if (typeName.value == '修改') {
                obj.id = flowId.value;
                await editFlowConfig(obj).then((res) => {
                    if (res.code == 0) {
                        ElMessage({
                            message: typeName.value + '成功',
                            type: 'success',
                        })
                        toList();
                    } else {
                        ElMessage.error(res.message)
                    }
                })
            }
        }

    })

}

//详情
const getInfo = async () => {
    await getFlowInfo(flowId.value).then((res) => {
        let data = res.data;
        flowForm.flowName = data.flowName;
        flowForm.linkPatient = data.linkPatient;
        timelineArr.value=data.nodes
    })
}
//返回
const toList = () => {
    router.push('/flowConfig/index')
}
// 初始化
onMounted(() => {
    let pageType = route.query.type;
    if (pageType == 'add') {
        typeName.value = '新增';
    } else if (pageType == 'edit') {
        typeName.value = '修改';
        flowId.value = route.query.id
        getInfo()
    }

})
</script>
<style lang="scss" scoped>
@import "@/assets/mixin/css/tablePublic";

.col-title {
    display: flex;
    align-items: center;

    i {
        width: 5px;
        height: 20px;
        background-color: #409eff;
        border-radius: 10px;
        display: inline-block;
    }

    label {
        margin-left: 10px;
    }
}

.col-form {
    margin-top: 10px;
}

.col-flow {
    margin-top: 20px;

    p {
        font-size: 14px;
        font-weight: 600;
    }

    .flow-time-div {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        span {
            font-size: 12px;
            color: #999;
        }

        .flow-time-span {
            margin-left: 30px;
        }

        .flow-time-m {
            margin-left: 5px;
            color: #333;

        }

    }

}

.limit-div {
    // margin-left: -68px;
    font-weight: 600;

    .limit-input {
        width: 160px;
        margin-right: 10px;
    }
}

.limit-i {
    margin: 10px 0;
    border: 1px dashed #ddd;
    width: 100%;
    display: inline-block;
}


.el-col {
    min-height: 500px
}


.foot-div {
    margin-top: 50px;
    text-align: center;
}
.image-div{
    text-align: center;
    .image-text{
        font-size: 12px;
        color: #999;
    }
}
.topLink {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .linkName {
        font-size: 18px;
        font-weight: 500;
        color: #409eff;
        cursor: pointer
    }

    .linkItem {
        margin-right: 20px;
        color: rgba(1, 1, 1, 0.4);
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        position: relative;

        .bottomIcon {
            position: absolute;
            display: inline-block;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: -8px;
            width: 23px;
            height: 4px;
            background: rgb(24, 144, 255);
            border-radius: 2px;
        }
    }

    .seclect {
        color: #4793ff;
        font-weight: 510;
    }
}
</style>